import React from 'react'
import Layout from '@/views/layout'
import store from '@/store'
const loadMode = require('./_import_' + process.env.NODE_ENV).default

const _import = function(file){
    // store.dispatch({
    //     type: 'NProgress',
    //     value: 'start'
    // })
    let component = loadMode(file)
    // component.finally(() => {
    //     store.dispatch({
    //         type: 'NProgress',
    //         value: 'done'
    //     })
    // })
    return component
}

const routes = [
    {
        path: "/",
        redirect: '/home',
        hidden: true
    },
    {
        path: "/home",
        redirect: '/home/index',
        component: Layout,
        name: 'Home',
        icon: 'home',
        children: [
            {
                path: "index",
                component: React.lazy(() => _import('home/index')),
                name: 'Home'
            }
        ]
    },
    {
        path: "/tree",
        redirect: '/tree/index',
        component: Layout,
        name: 'Tree',
        icon: 'tree',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('tree/index')),
                name: 'Tree'
            }
        ]
    },
    {
        path: "/login",
        component: React.lazy(() => _import('login/index')),
        name: 'login',
        hidden: true
    },
    {
        path: "/404",
        component: React.lazy(() => _import('404/index')),
        name: '404',
        hidden: true
    }
]

const asyncRoutes = [
    {
        path: "/list",
        component: Layout,
        name: '一级导航',
        icon: 'list',
        children: [
            {
                path: 'a',
                component: React.lazy(() => _import('list/a/index')),
                name: '二级导航',
                icon: 'list',
                children: [
                    {
                        path: '1',
                        component: React.lazy(() => _import('list/a/1/index')),
                        icon: 'list',
                        name: '三级页面-1'
                    },
                    {
                        path: '2',
                        component: React.lazy(() => _import('list/a/2/index')),
                        icon: 'list',
                        name: '三级页面-2'
                    }
                ]
            },
            {
                path: 'b',
                component: React.lazy(() => _import('list/b/index')),
                icon: 'list',
                name: '二级页面'
            },
            {
                path: 'c',
                component: React.lazy(() => _import('list/c/index')),
                icon: 'list',
                name: '路由传参'
            },
            {
                path: 'params/:user/:id',
                component: React.lazy(() => _import('list/params/index')),
                name: '路由参数',
                hidden: true
            }
        ]
    },
    {
        path: "/dialog",
        redirect: '/dialog/index',
        component: Layout,
        name: 'Dialog',
        icon: 'dialog',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('dialog/index')),
                name: 'Dialog'
            }
        ]
    },
    {
        path: "/button",
        redirect: '/button/index',
        component: Layout,
        name: 'Button',
        icon: 'button',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('button/index')),
                name: 'Button'
            }
        ]
    },
    {
        path: "/tag",
        redirect: '/tag/index',
        component: Layout,
        name: 'Tag',
        icon: 'tag',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('tag/index')),
                name: 'Tag'
            }
        ]
    },
    {
        path: "/table",
        redirect: '/table/index',
        component: Layout,
        name: 'Table',
        icon: 'table',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('table/index')),
                name: 'Table'
            }
        ]
    },
    {
        path: "/pagination",
        redirect: '/pagination/index',
        component: Layout,
        name: 'Pagination',
        icon: 'pagination',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('pagination/index')),
                name: 'Pagination'
            }
        ]
    },
    {
        path: "/alert",
        redirect: '/alert/index',
        component: Layout,
        name: 'Alert',
        icon: 'alert',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('alert/index')),
                name: 'Alert'
            }
        ]
    },
    {
        path: "/form",
        redirect: '/form/index',
        component: Layout,
        name: 'Form',
        icon: 'form',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('form/index')),
                name: 'Form'
            }
        ]
    },
    {
        path: "/toask",
        redirect: '/toask/index',
        component: Layout,
        name: 'Toask',
        icon: 'toask',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('toask/index')),
                name: 'Toask'
            }
        ]
    },
    {
        path: "/loading",
        redirect: '/loading/index',
        component: Layout,
        name: 'Loading',
        icon: 'loading',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('loading/index')),
                name: 'Loading'
            }
        ]
    },
    {
        path: "/crop",
        redirect: '/crop/index',
        component: Layout,
        name: 'Crop',
        icon: 'crop',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('crop/index')),
                name: 'Crop'
            }
        ]
    },
    {
        path: "/tooltip",
        redirect: '/tooltip/index',
        component: Layout,
        name: 'Tooltip',
        icon: 'tooltip',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('tooltip/index')),
                name: 'Tooltip'
            }
        ]
    },
    {
        path: "/carousel",
        redirect: '/carousel/index',
        component: Layout,
        name: 'Carousel',
        icon: 'carousel',
        children: [
            {
                path: 'index',
                component: React.lazy(() => _import('carousel/index')),
                name: 'Carousel'
            }
        ]
    }
]

function initRoutes(routes, parentPath = ''){
	routes.forEach(item => {
        let parent = item.parent ? [...item.parent] : []
		let fullPath = (parentPath ? (parentPath + '/') : parentPath) + item.path
        item.fullPath = fullPath
		if(!item.hidden){
            let hasChildren = (item.children !== undefined && Array.isArray(item.children) && item.children.length)
			if(hasChildren){
                let _parent = []
                parent.push({
                    path: item.path,
                    fullPath,
                    name: item.name
                })
                _parent = [...parent]
                item.children.forEach(_item => {
                    _item.parent = _parent
                    _item.parentPath = item.fullPath
                })
                initRoutes(
                    item.children,
                    fullPath
                )
			}
		}
    })
    return routes
}

export {
    routes,
    asyncRoutes,
    initRoutes
}